<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.zhimg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.zhimg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.zhimg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        /* 
        使用index作为key
            初始数据
                {id: 1, name: 'react', age: 18}
                {id: 2, name: 'vue', age: 20}
            初始虚拟DOM
                <li key=0>react - 18 <input type="text" /></li>
                <li key=1>vue - 20 <input type="text" /></li>
            
            更新后数据
                {id: 3, name: 'js3', age: 20}
                {id: 1, name: 'react', age: 18}
                {id: 2, name: 'vue', age: 20}
            更新后虚拟DOM
                <li key=0>js3 - 20 <input type="text" /></li>
                <li key=1>react - 18 <input type="text" /></li>
                <li key=2>vue - 20 <input type="text" /></li>
        */

        class Person extends React.Component {

            state = {
                persons: [
                    {
                        id: 1,
                        name: 'react',
                        age: 18
                    },
                    {
                        id: 2,
                        name: 'vue',
                        age: 20
                    }
                ]
            }

            componentDidMount() {
                setInterval(() => {
                    this.setState({
                        date: new Date()
                    })
                }, 1000);
            }

            handleAdd = () => {
                const {persons} = this.state

                const person = {
                    id: persons.length + 1,
                    name: `js${persons.length + 1}`,
                    age: 20
                }

                this.setState({
                    persons: [person, ...persons]
                })
            }

            render() {
                return (
                    <div>
                        <button onClick={this.handleAdd}>新增</button>
                        <h3>使用index作为key</h3>
                        <ul>
                            {
                                this.state.persons.map((person, index) => {
                                    return <li key={index}>{person.name} - {person.age} <input type="text" /></li>
                                })
                            }
                        </ul>
                        <hr/>
                        <h3>使用index作为key</h3>
                        <ul>
                            {
                                this.state.persons.map(person => {
                                    return <li key={person.id}>{person.name} - {person.age} <input type="text" /></li>
                                })
                            }
                        </ul>
                    </div>
                )
            }

        }
       
        ReactDOM.render(<Person />, document.getElementById('root'))
    </script>
</body>
</html>